import React, { FC, useState, useEffect } from 'react'
import { Form, Input, Button, Divider, message } from 'antd'

import { useNavigate } from 'react-router-dom'
import ProductionVoucher from '~/components/production-voucher'
import { createItems } from '~/api/collection-api'

import { FooterAction } from './styled'
import PropertyList from './container/property-list'
import PropertySelect from './components/property-involved-select'
import NotifyModal from '~/components/notify-modal'

import { SAVETYPE } from '~/constants'

const notifyList = ['采集录入手工开具法律文书清单的涉案财物信息后，再【移送专管员】或【告知专管员】']

const PropertyInvolved: FC = () => {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const [notifyVisible, setNotifyVisible] = useState(false)
  const [selectVisible, setSelectVisible] = useState(false)
  const [modifyIndex, setModifyIndex] = useState(-1)
  const [saveType, setSaveType] = useState(SAVETYPE.create)
  const [certificateVisible, setCertificateVisible] = useState(false)
  const [selectedItems, setSelectedItems] = useState([])
  const { resetFields, validateFields } = form

  const handleCreateItems = async () => {
    await createItems(selectedItems)
    setSelectedItems([])
    message.success('物品创建成功')
    navigate('/transfer-manager')
  }

  const onClickAddItems = () => {
    validateFields(['caseNo', 'caseName']).then(values => {
      console.log('values', values)
      resetFields([
        'itemName',
        'totalNumber',
        'unitName',
        'acquireTime',
        'takeTime',
        'specs',
        'feature',
        'idInfo',
        'propertyFlag',
        'valuableFlag',
        'vulnerableFlag',
        'itemClassification',
        'remark',
        'unitName2',
        'unitRate2',
        'unitName3',
        'unitRate3'
      ])
      setSelectVisible(true)
      setSaveType(SAVETYPE.create)
    })
  }

  const showNotification = () => {
    setNotifyVisible(true)
  }

  useEffect(() => {
    showNotification()
  }, [])

  return (
    <div>
      <header>
        <Form validateTrigger="onBlur" layout="inline" form={form} style={{ marginBottom: 16 }}>
          <Form.Item rules={[{ required: true, message: '请输入案件编号' }]} name="caseNo" label="案件编号：">
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item rules={[{ required: true, message: '请输入案件名称' }]} name="caseName" label="案件名称：">
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Button type="primary" onClick={onClickAddItems}>
            采集涉案财物信息
          </Button>
        </Form>
      </header>
      <Divider />
      {!!selectedItems.length && (
        <main style={{ marginTop: 21 }}>
          <PropertyList
            form={form}
            setSaveType={setSaveType}
            setSelectedItems={setSelectedItems}
            selectedItems={selectedItems}
            setSelectVisible={setSelectVisible}
            setModifyIndex={setModifyIndex}
            onClickAddItems={onClickAddItems}
          />

          <FooterAction>
            <div>
              {/* <Button onClick={onClickAddItems} type="primary">
                新增涉案财物
              </Button> */}
              <Button type="primary" onClick={handleCreateItems} style={{ marginLeft: 8 }}>
                提交采集信息
              </Button>
              <Button
                onClick={() => {
                  navigate('/index')
                }}
                style={{ marginLeft: 8 }}
              >
                返回
              </Button>
            </div>
          </FooterAction>
        </main>
      )}

      <PropertySelect
        setSelectedItems={setSelectedItems}
        selectedItems={selectedItems}
        setSelectVisible={setSelectVisible}
        visible={selectVisible}
        form={form}
        saveType={saveType}
        modifyIndex={modifyIndex}
      />
      <ProductionVoucher
        onOk={() => {
          setCertificateVisible(false)
        }}
        onCancel={() => {
          setCertificateVisible(false)
        }}
        visible={certificateVisible}
      />
      <NotifyModal
        visible={notifyVisible}
        list={notifyList}
        onCancel={() => {
          setNotifyVisible(false)
        }}
      />
    </div>
  )
}

export default PropertyInvolved
